<!--
 * @Descripttion: 
 * @version: 
 * @Author: hutao
 * @Date: 2023-04-24 14:13:50
 * @LastEditors: hutao
 * @LastEditTime: 2023-06-02 15:34:17
-->
<template>
  <div ref="htCardRef">
    <el-card ref="htCard"
             class="ht-card ht-search-card"
             style="width: 100%;transition: height 1500ms;">
      <el-row v-if="isShowKey">
        <el-col style="display: flex"><el-input @change="(e) => change('keys', e)"
                    v-model.trim="state.filter.keys"
                    :placeholder="placeholder"
                    suffix-icon="el-icon-search"></el-input>
          <el-button v-if="showFilter"
                     @click="toggle()"
                     type="text"
                     style="margin: 0 24px">{{ state.filterText }}
            <i v-if="!state.visible"
               class="el-icon-arrow-down"></i>
            <i v-else
               class="el-icon-arrow-up"></i> </el-button></el-col>
      </el-row>
      <!-- <transition name="el-zoom-in-top"> -->
      <el-form v-show="state.visible"
               ref="baseForm"
               label-width="100px"
               :label-position="'top'"
               style="margin-top: 0"
               class="ht-search-form">
        <div>
          <!-- <slot name="first"></slot> -->
          <!-- 定义插槽 -->

          <el-row :gutter="24"
                  style="flex: 1"
                  type="flex">
            <slot name="center"></slot>
          </el-row>

        </div>
        <div style="display: flex">
          <el-row :gutter="24"
                  style="flex: 1"
                  type="flex">
            <slot name="footer"></slot>
          </el-row>
          <div style="width: 152px; margin-top: 33px">
            <el-button style="float: right"
                       @click="reset">重置</el-button>
            <el-button @click="handelSearch()"
                       type="primary"
                       style="float: right; margin-right: 16px">筛选</el-button>
          </div>
        </div>
      </el-form>
      <!-- </transition> -->
    </el-card>
  </div>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
// import elementResizeDetectorMaker from 'element-resize-detector';
interface State {
  /** 数据状态 */
  loading: boolean;
  visible: boolean;
  /** 内部div高度 */
  height: number;
  filter: {
    keys?: string;
  };
  filterText: string;
}
@Component
export default class Index extends Vue {
  @Prop({ default: "搜索" }) placeholder!: string;
  @Prop({ default: false }) showFilter!: boolean;
  @Prop() value!: boolean;
  @Prop({ default: true }) isShowKey!: boolean;

  /** 数据 */
  state: State = {
    loading: false,
    visible: !this.isShowKey,
    height: 84,
    filter: {
      keys: undefined,
    },
    filterText: "展开筛选",
  };
  /** 生命周期 */
  mounted() {
    this.getHeight();
    // const erd = elementResizeDetectorMaker();
    // const that = this;
    // erd.listenTo(document.getElementById('bar'), function(element: any) {
    //   // this.state.height:
    // });
  }
  getHeight() {
    const data1 = this.$refs.htCard as any;
    this.state.height = data1.$el.offsetHeight;

    this.$emit("handelVisible", this.state.height, this.state.visible);
  }
  /** 方法 */
  change() {
    this.$emit("input", this.state.filter.keys);
    this.$emit("change", this.state.filter.keys);
    this.$emit("search", this.state.filter);
  }
  handelSearch() {
    this.$emit("search", this.state.filter);
  }
  toggle() {
    this.state.visible = !this.state.visible;
    if (!this.state.visible) {
      this.state.filterText = "展开筛选";
    } else {
      this.state.filterText = "收起筛选";
    }
    setTimeout(() => {
      this.getHeight();
    }, 300);
  }
  reset() {
    this.state.filter.keys = undefined;
    this.$emit("reset");
  }
  /** 监听 */
  @Watch("value", { immediate: true })
  getValue(val: string) {
    this.state.filter.keys = val;
  }
  /** 计算属性 */
}
</script>
<style lang="scss">
.ht-search-card {
  .el-card__body {
    .el-row {
      .el-col {
        .el-form-item {
          margin-bottom: 0px;
        }
      }
    }
  }
}
</style>
